<template>
  <div>
    <Card title="新增标签" :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="brandForm"
        :model="brandFormData"
        :rules="brandFormRules"
        :label-width="140"
      >
        <Row>
          <Col span="18" offset="3">
            <FormItem label="标签名称：" prop="labelName">
              <Input
                v-model="brandFormData.labelName"
                maxlength="20"
                show-word-limit
                placeholder="请输入标签名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="标签类型：" prop="labelType">
              <Select v-model="brandFormData.labelType" style="width: 200px">
                <Option
                  v-for="(item, index) in levelMap"
                  :value="item.value"
                  :key="index"
                  >{{ item.label }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="商品图角标：" prop="subscriptImg">
              <Upload
                class="ivu-mr qw-disflex"
                :defaultList="commodityIcon"
                :mr="16"
                :maxSize="2048"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeImageKey2"
              ></Upload>
              <p>提示: 上传图片大小不能超过2048K,尺寸750px*360px</p>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="商品名称图标：" prop="nameImg">
              <Upload
                class="ivu-mr qw-disflex"
                :defaultList="commodityNameIcon"
                :mr="16"
                :maxSize="2048"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeImageKey1"
              ></Upload>
              <p>提示: 上传图片大小不能超过2048K,尺寸100px*100px，比例1:1</p>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="标签介绍：" prop="note">
              <Input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                maxlength="100"
                show-word-limit
                v-model="brandFormData.note"
                placeholder="请输入标签介绍"
              ></Input>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem>
              <Button
                type="primary"
                :loading="isLoading"
                @click="handleSubmit('brandForm')"
                >提交</Button
              >
              <Button @click="handleReset('brandForm')" class="ivu-ml-8"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>
<script>
import brandUpdata from './configjs/productTagManageUpdata';
import Upload from '@/components/common/upload'; // 上传组件

import { ApiRequest } from '@api/basePage';

export default {
  name: 'productTagManageAdd',
  components: {
    Upload
  },
  mixins: [brandUpdata],
  data () {
    return {
      commodityIcon: [],
      commodityNameIcon: [],
      isLoading: false,
      allBrandData: [],
      requestApi: {
        // 视情况自定义
        // 新增品牌
        createProductBrand: {
          url: '/sysback/label/baseAdd', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 获取所有品牌
        getAllProductBrands: {
          url: '/sysback/productbrand/productbrand/getAllProductBrands', // 接口地址
          type: 'post' // 接口请求类型
        }
      },
      brandFormData: {
        labelName: '',
        labelType: '',
        subscriptImg: '',
        nameImg: '',
        note: ''
      },
      brandFormRules: {
        labelName: [
          {
            required: true,
            message: '请填写标签名称',
            trigger: 'change'
          },
          {
            type: 'string',
            min: 1,
            message: '标签名称不得少于一个字符',
            trigger: 'change'
          }
        ],
        labelType: [
          {
            required: true,
            message: '请选择标签类型',
            trigger: 'change'
          }
        ],
        subscriptImg: [
          {
            required: true,
            message: '请上传商品图角标',
            trigger: 'change'
          }
        ],
        nameImg: [
          {
            required: true,
            message: '请上传商品名称图标',
            trigger: 'change'
          }
        ],
        note: [
          {
            required: true,
            message: '请填写介绍',
            trigger: 'change'
          },
          {
            type: 'string',
            min: 5,
            message: '介绍不得少于5个字符',
            trigger: 'change'
          }
        ]
      },
      levelMap: [
        {
          value: '1',
          label: '活动标签'
        },
        {
          value: '2',
          label: '服务标签'
        },
        {
          value: '3',
          label: '性能标签'
        }
      ]
    };
  },
  created () {
    // this.getAllProductBrands();
  },
  methods: {
    // 开始请求所有品牌信息
    getAllProductBrands () {
      // this.isLoading = true;
      ApiRequest(
        this.requestApi.getAllProductBrands.url,
        this.requestApi.getAllProductBrands.type,
        {},
        false
      ).then((res) => {
        if (res.retStatus === '1') {
          this.allBrandData = res.retData ? res.retData : [];
        }
        this.isLoading = false;
      });
    },
    // 清空表单
    handleReset (name) {
      this.$router.go(-1);
    },
    maxTagPlaceholder (num) {
      return 'more ' + num;
    },
    changeImageKey1 (list) {
      this.commodityNameIcon = list;
      let {
        response: { retData }
      } = list[0];
      this.brandFormData.nameImg = retData;
    },
    changeImageKey2 (list) {
      this.commodityIcon = list;
      let {
        response: { retData }
      } = list[0];
      this.brandFormData.subscriptImg = retData;
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let brandStateMap = {
            禁用: '2',
            启用: '1'
          };
          this.isLoading = true;
          // 开始请求会员信息
          ApiRequest(
            this.requestApi.createProductBrand.url,
            this.requestApi.createProductBrand.type,
            this.brandFormData,
            false
          ).then((res) => {
            if (res.retStatus === '1') {
              this.$Message.success('新增品牌成功!');
              this.$router.go(-1);
            }
            this.isLoading = false;
          });
        }
      });
    }
  }
};
</script>
